<template>
  <div>
    <div class="box">
      <div>
        <i class="van-icon van-icon-gold-coin-o" id="sp1"></i>
        <p>我的余额</p>
      </div>
      <div>
        <i class="van-icon van-icon-edit" id="sp1"></i>
        <p>我的砍价</p>
      </div>
      <div @click="govolume">
        <i class="van-icon van-icon-coupon-o" id="sp2"></i>
        <p>我的礼券</p>
      </div>
      <div>
        <i class="van-icon van-icon-star-o" id="sp2"></i>
        <p>我的收藏</p>
      </div>
      <div @click="godizhi">
        <i class="van-icon van-icon-star-o" id="sp3"></i>
        <p>我的地址</p>
      </div>
      <div>
        <i class="van-icon van-icon-service-o" id="sp3"></i>
        <p>联系客服</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    godizhi() {
      if (localStorage.getItem("token")) {
        this.$router.push("/addres");
      } else {
        this.$router.push("/login");
      }
    },
    govolume() {
      this.$router.push("/addres");
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-around;

  div {
    width: 26%;
    text-align: center;
    i {
      font-size: 1rem;
    }
  }
}
#sp1 {
  color: red;
}
#sp2 {
  color: orange;
}
#sp3 {
  color: rgb(110, 110, 184);
}
</style>